@import "variables.less";

.mail-list {
	padding-bottom: 126px;
	.mail-list-head {
		line-height: 40px;
		margin-bottom: 24px;
		.stats {
			display: inline-block;
			float: left;
			.highlight {
				font-weight: 600;
			}
		}
		.options {
			display: inline-block;
			float: right;
		}
		.clearfix();
	}
	.mail-list-item {
		li {
			width: 100%;
			list-style-type: none;
			background-color: #FFFFFF;
			padding: 16px;
			margin-bottom: 8px;
			position: relative;
			min-height: 0;
			.icon {
				position: absolute;
				top: 16px;
				left: 16px;
				display: inline-block;
				span {
					width: 50px;
					height: 50px;
					display: inline-block;
					line-height: 50px;
					text-align: center;
					font-size: 30px;
					font-weight: 600;
					border-radius: 50%;
					color: #FFFFFF;
					text-transform: uppercase;
					background-color: @gray-100;
					&.bg-color-0 {
						background-color: #F44336;
					}
					&.bg-color-1 {
						background-color: #E91E63;
					}
					&.bg-color-2 {
						background-color: #9C27B0;
					}
					&.bg-color-3 {
						background-color: #673AB7;
					}
					&.bg-color-4 {
						background-color: #FFC107;
					}
					&.bg-color-5 {
						background-color: #2196F3;
					}
					&.bg-color-6 {
						background-color: #03A9F4;
					}
					&.bg-color-7 {
						background-color: #26C6DA;
					}
					&.bg-color-8 {
						background-color: #009688;
					}
					&.bg-color-9 {
						background-color: #CDDC39;
					}
				}
			}
			.cntx {
				padding-left: 70px;
				.from {
					font-size: 28px;
					font-weight: 600;
					display: inline-block;
					margin-bottom: 20px;
					line-height: normal;
					-webkit-user-select: all;
					cursor: default;
				}
				.date {
					display: inline-block;
					float: right;
					font-size: 16px;
					line-height: normal;
					font-weight: normal;
					opacity: 0.5;
					-webkit-user-select: text;
					cursor: text;
				}
				.subject {
					display: block;
					width: 100%;
					font-size: 20px;
					font-weight: 600;
					line-height: normal;
					padding: 0;
					margin: 0 0 5px;
					-webkit-user-select: text;
					cursor: text;
				}
				.context {
					padding: 0;
					margin: 0;
					font-size: 16px;
					line-height: normal;
					-webkit-user-select: text;
					cursor: text;
				}
			}
			&.error {
				color: @red-100;
			}
			&.default {
				color: #858585;
				cursor: default;
				&:hover {
					box-shadow: none;
				}
			}
			//&:hover {
			//	box-shadow: 0 0 5px rgba(0, 0, 0, 0.26);
			//}
		}
		.opt {
			text-align: right;
			.opt-i {
				display: inline-block;
				margin-left: 24px;
			}
		}
	}
}
